<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>微信公众号发送记录</title>
	<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>

<body class="pear-container">
	<!-- 筛选表单区域（适配微信日志字段） -->
	<div class="layui-card">
		<div class="layui-card-body">
			<form class="layui-form" action="">
				<div class="layui-form-item">
					<!-- 手机号筛选（复用短信逻辑） -->
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">手机号</label>
						<div class="layui-input-inline">
							<input type="text" name="phone" id="phone" placeholder="输入手机号" class="layui-input">
						</div>
					</div>
					<!-- 公众号名称筛选（微信特有） -->
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">公众号名称</label>
						<div class="layui-input-inline">
							<input type="text" name="wechat_name" id="wechat_name" placeholder="输入公众号名称" class="layui-input">
						</div>
					</div>
					<!-- OpenID筛选（微信特有） -->
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">OpenID</label>
						<div class="layui-input-inline">
							<input type="text" name="openid" id="openid" placeholder="输入用户OpenID" class="layui-input">
						</div>
					</div>
					<!-- 模板CODE筛选（复用短信逻辑，字段一致） -->
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">模板CODE</label>
						<div class="layui-input-inline">
							<input type="text" name="template_id" id="template_id" placeholder="输入模板CODE"
								class="layui-input">
						</div>
					</div>
					<!-- 发送状态筛选（与短信一致） -->
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">状态</label>
						<div class="layui-input-inline">
							<select name="is_send" id="is_send" lay-search>
								<option value="">请下拉选择</option>
								<option value="1">成功</option>
								<option value="0">失败</option>
							</select>
						</div>
					</div>
					<br>
					<!-- 发送时间范围筛选（微信日志特有，补充短信未有的筛选条件） -->
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">发送时间</label>
						<div class="layui-input-inline" style="width: 160px;">
							<input type="datetime-local" name="send_time_start" id="send_time_start" class="layui-input">
						</div>
						<div class="layui-form-mid">-</div>
						<div class="layui-input-inline" style="width: 160px;">
							<input type="datetime-local" name="send_time_end" id="send_time_end" class="layui-input">
						</div>
					</div>
					<!-- 搜索/重置按钮（与短信一致） -->
					<div class="layui-form-item layui-inline">
						<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="base-query">
							<i class="layui-icon layui-icon-search"></i>
							查询
						</button>
						<button type="reset" class="pear-btn pear-btn-md">
							<i class="layui-icon layui-icon-refresh"></i>
							重置
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>

	<!-- 表格展示区域（与短信一致，列适配微信字段） -->
	<div class="layui-card">
		<div class="layui-card-body">
			<table id="base-table" lay-filter="base-table"></table>
		</div>
	</div>

	<!-- 表格工具栏（无新增/测试按钮，仅保留刷新等默认功能） -->
	<script type="text/html" id="base-toolbar">
	</script>

	<!-- 表格操作列（仅保留删除按钮，与短信一致） -->
	<script type="text/html" id="base-bar">
		<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove">
			<i class="layui-icon layui-icon-delete"></i>删除
		</button>
	</script>

	<!-- 发送状态格式化（完全复用短信逻辑，状态值一致） -->
	<script type="text/html" id="base-isSend">
		{{#if (d.is_send == 1) { }}
			<i class="layui-icon layui-icon-face-smile" style="font-size: 20px; color: #1E9FFF;"><span>成功</span></i>  
		{{# }else if(d.is_send == 0){ }}
			<i class="layui-icon layui-icon-face-cry" style="font-size: 20px; color: #ff1e1e;"><span>失败</span></i> 
		{{# } }}
	</script>

	<!-- 引入依赖JS（与短信页面一致） -->
	<script src="../../component/com/api.js"></script>
	<script src="../../component/com/auth.js"></script>
	<script src="../../component/layui/layui.js"></script>
	<script src="../../component/pear/pear.js"></script>
	<script>
		layui.use(['table', 'form', 'jquery', 'common'], function () {
			let table = layui.table;
			let form = layui.form;
			let $ = layui.jquery;
			let common = layui.common;

			// 1. 基础配置（适配微信日志接口）
			let API_BASE_URL = apiConfig.baseUrl;
			let token = window.localStorage.getItem("token") || window.sessionStorage.getItem("token");

			// 2. 表格列定义（适配WechatLog模型字段，新增公众号名称、OpenID列）
			const cols = [
				[{
					type: 'checkbox'
				},
				{
					title: '序号',
					field: 'id',
					align: 'left',
					width: 80,
				},
				{
					title: '发送时间',
					field: 'send_time',
					align: 'center',
					width: 180,
				},
				{
					title: '公众号名称',
					field: 'wechat_name',
					align: 'center',
					width: 150,
				},
				{
					title: '手机号',
					field: 'phone',
					align: 'center',
					width: 120,
				},
				{
					title: '用户OpenID',
					field: 'openid',
					align: 'center',
					width: 220, // OpenID较长，预留足够宽度
				},
				{
					title: '发送状态',
					field: 'is_send',
					align: 'center',
					width: 100,
					templet: '#base-isSend' // 复用状态格式化模板
				},
				{
					title: '模板CODE',
					field: 'template_id',
					align: 'left',
					width: 180,
				},
				{
					title: '发送内容',
					field: 'content',
					align: 'left',
					// 内容较长，不固定宽度，自适应
				},
				{
					title: '操作',
					toolbar: '#base-bar',
					align: 'center',
					fixed: "right",
					width: 100,
				},
				]
			];

			// 3. 渲染表格（适配微信日志接口，参数与短信一致）
			table.render({
				elem: '#base-table',
				// 微信日志后端接口地址（对应WechatLogListView的路由）
				url: `${API_BASE_URL}/wechat/log/`,
				page: true,
				// 分页参数（与后端保持一致）
				request: {
					pageName: 'page',
					limitName: 'limit'
				},
				// 分页条数选择器（与短信一致）
				limits: [10, 20, 30, 40, 50, 100],
				limit: 10,
				cols: cols,
				skin: 'line',
				minmax: true,
				toolbar: '#base-toolbar',
				// 请求头携带Token（权限验证）
				headers: {
					"Authorization": token
				},
				// 解析后端返回数据（与微信日志接口返回格式匹配）
				parseData: function (res) {
					return {
						"code": res.success ? 0 : 1, // 成功返回0，失败返回1（layui表格要求）
						"msg": res.message || "操作成功",
						"count": res.data.count, // 总条数（分页用）
						"data": res.data.results, // 列表数据
						"curr": res.data.current_page // 当前页码
					};
				},
				// 默认工具栏（刷新、导出等，与短信一致）
				defaultToolbar: [{
					title: '刷新',
					layEvent: 'refresh',
					icon: 'layui-icon-refresh',
				}, 'filter', 'print', 'exports'],
				// 表格渲染完成回调（无额外逻辑，保持空函数）
				done: function () {}
			});

			// 4. 表格行操作事件（仅处理删除，与短信逻辑一致）
			table.on('tool(base-table)', function (obj) {
				switch (obj.event) {
					case "remove":
						window.remove(obj);
						break;
				}
			});

			// 5. 筛选表单提交事件（携带筛选参数刷新表格）
			form.on('submit(base-query)', function (data) {
				// 处理时间筛选参数（格式适配后端DateTimeFilter）
				if (data.field.send_time_start) {
					// 将datetime-local格式（2025-11-02T16:00）转为后端支持的格式（2025-11-02 16:00:00）
					data.field.send_time_start = data.field.send_time_start.replace('T', ' ') + ':00';
				}
				if (data.field.send_time_end) {
					data.field.send_time_end = data.field.send_time_end.replace('T', ' ') + ':59';
				}

				// 刷新表格，携带筛选参数
				table.reload('base-table', {
					where: data.field,
					page: {
						curr: 1 // 筛选时默认回到第一页
					}
				});
				return false; // 阻止表单默认提交
			});

			// 6. 表格工具栏事件（仅处理刷新）
			table.on('toolbar(base-table)', function (obj) {
				switch (obj.event) {
					case "refresh":
						window.refresh(obj);
						break;
				}
			});

			// 7. 刷新表格函数（与短信一致）
			window.refresh = function (param) {
				table.reload('base-table');
			}

			// 8. 删除函数（调用微信日志删除接口，适配WechatLog的逻辑删除）
			window.remove = function (obj) {
				layer.confirm('确定要删除这条发送记录吗？（逻辑删除，数据不会物理删除）', {
					title: '删除确认',
					icon: 3
				}, function (index) {
					// 发送删除请求（微信日志删除接口，需替换为实际路由）
					$.ajax({
						url: `${API_BASE_URL}/wechat/log/${obj.data.id}/`,
						type: 'DELETE',
						headers: {
							"Authorization": token,
							"Content-Type": "application/json"
						},
						success: function (res) {
							layer.close(index);
							if (res.success) {
								layer.msg('删除成功', { icon: 1, time: 1500 }, function () {
									table.reload('base-table'); // 刷新表格
								});
							} else {
								layer.msg(`删除失败：${res.message}`, { icon: 2, time: 2000 });
							}
						},
						error: function (xhr) {
							layer.close(index);
							const errMsg = xhr.status === 401 ? '登录已过期，请重新登录' : '网络异常，删除失败';
							layer.msg(errMsg, { icon: 2, time: 2000 });
							if (xhr.status === 401) {
								setTimeout(() => {
									window.location.href = '../../login.html';
								}, 2000);
							}
						}
					});
				});
			}
		})
	</script>
</body>

</html>